<template>
  <div class="el-card form-container is-never-shadow">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="品牌名称:" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母:">
        <el-input v-model="form.firstLetter"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO:" prop="name">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="logo" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图:">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="bigPic" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌故事:">
        <el-input v-model="form.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示:">
        <el-radio v-model="a" label="1">是</el-radio>
        <el-radio v-model="a" label="2">否</el-radio>
      </el-form-item>
      <el-form-item label="品牌制造商:">
        <el-radio v-model="b" label="1">是</el-radio>
        <el-radio v-model="b" label="2">否</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="open">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchGoodsBrandListEdit } from '@/api/api'
export default {
  data() {
    return {
      logo: [],
      bigPic: [],
      form: {},
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
      },
      a: '',
      b: '',
    }
  },
  methods: {
    open() {
      this.$confirm('是否提交数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    var id = this.$route.query.id
    fetchGoodsBrandListEdit(id).then((res) => {
      console.log(res.data)
      //   console.log(typeof res.data.showStatus)
      this.logo.push({ url: res.data.logo })
      this.bigPic.push({ url: res.data.bigPic })
      this.form = res.data
      this.a = res.data.showStatus.toString()
      this.b = res.data.factoryStatus.toString()
    })
  },
}
</script>

<style lang="scss">
.form-container {
  width: 800px;
}
.form-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 720px;
  padding: 35px 35px 15px;
  margin: 20px auto;
}
</style>
